import React, { Component, createContext } from "react";

let { Provider, Consumer } = createContext();

class ButtonAddCmp extends Component {
  render() {
    return <Consumer>
      {({handlAdd})=>{
          return <button onClick={handlAdd}>+</button>
      }}
    </Consumer>;
  }
}
class ButtonSubCmp extends Component {
  render() {
    return <Consumer>
      {({handlSub})=>{
        return <button onClick={handlSub}>-</button>
      }}
    </Consumer>;
  }
}
class Counter extends Component {
  render() {
    return (
     <Consumer>
       {({num})=>{
         return <span>{num}</span>
       }}
     </Consumer>
    );
  }
}
class Test extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}
class App extends Component {
  state = {
    num: 666,
  };
  handlAdd = (params) => {
    this.setState({
      num: this.state.num + 1,
    });
  };
  handlSub = (params) => {
    this.setState({
      num: this.state.num - 1,
    });
  };
  render() {
    return (
      <div>
        <Provider value={{ num: this.state.num,handlAdd:this.handlAdd,handlSub:this.handlSub}}>
          <Test>
            <ButtonAddCmp></ButtonAddCmp>
            <Counter></Counter>
            <ButtonSubCmp></ButtonSubCmp>
          </Test>
        </Provider>
      </div>
    );
  }
}

export default App;
